<template>
  <view class="create-order">
    <view v-if="OrderId" class="flex direction-column justify-center align-center qrcode">
        <img :src="QRCode" alt="">
        <view class="price">￥{{ orderForm.ServCharge }}</view>
        <view class="label">微信扫一扫付款</view>
    </view>
    <view v-else class="p-3 order-form-wrap">
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm" ref="form1">

        <u-form-item label="金额" prop="ServCharge">
          <u--input v-model.number="orderForm.ServCharge" type="digit" border="none" placeholder="请输入收款金额"></u--input>
        </u-form-item>

      </u--form>
      <u-button @click="handleOrderPay" color="#F65D30" shape="circle" text="下一步"></u-button>
    </view>
  </view>
</template>

<script>
import { orderRepairPay, orderRepairPayResult } from "@/apis/workOrder.js";

export default {
  data() {
    return {
      editId: "",
      OrderId: "",
      QRCode: "",
      orderForm: {
        ServCharge: 0,
      },
    };
  },
  onLoad(option) {
    console.log("option", option);
    if (option.id) {
      this.editId = option.id;
    }
  },
  methods: {
    async requestPayResult() {
      const res = await orderRepairPayResult({
        orderId: this.OrderId,
      });
      console.log("requestPayResult", res);
      if (res.data.PayResult == 2) {
        setTimeout(() => {
          this.requestPayResult();
        }, 1000);
      } else if(res.data.PayResult == 1) {
        uni.showToast({
          title: "支付成功",
          icon: "success",
          mask: true,
          position: "center",
        });
        setTimeout(() => {
          this.$navigateBack(this.$router, 1);
        }, 1000);
      }
    },
    async handleOrderPay() {
      const ServCharge = this.orderForm.ServCharge;
      if (!ServCharge)
        return uni.showToast({
          title: "请填写付款金额",
          icon: "none",
          mask: true,
          position: "center",
        });

      const res = await orderRepairPay({
        RepairId: this.editId,
        ServCharge,
      });
      console.log("orderCancel res", res);

      if (res.MsgCode != 0) return;
      this.OrderId = res.data.OrderId;
      this.QRCode = res.data.QRCode;
      this.requestPayResult();
      // setTimeout(() => {
      //     this.$navigateBack(this.$router, 1)
      // }, 1000)
    },
  },
};
</script>

<style lang="scss">
.create-order {
  .qrcode{
    img {
      width: 160px;
      margin-top:20px;
    }
    .price{
      color: $s-manager-color;
      font-size: 24px;
      margin: 8px 0;

    }
  }

  .create-order-tabs {
    background-color: #fff;
  }

  .sub-title {
    color: $s-manager-color;
    font-size: 28rpx;
    margin-bottom: 24rpx;
  }

  .info-view {
    text-align: right;
    width: 100%;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
  }

  ::v-deep .u-form-item__body__right__message {
    text-align: right;
  }

  .order-form-wrap {
    .order-form-single {
      background-color: #fff;
      box-shadow: $s-bg-shadow;
      border-radius: $s-border-radius;
      margin-bottom: 30rpx;

      .order-form-title {
        color: #f43030;
        font-size: 30rpx;
        background-color: #fff7f5;
        padding-top: 24rpx;
        padding-bottom: 24rpx;
      }

      ::v-deep .u-textarea {
        border-color: transparent !important;
        padding: 20rpx 30rpx;
        border-radius: 0;
      }

      ::v-deep .u-textarea--disabled {
        background-color: #fff;
      }

      ::v-deep .u-upload__wrap {
        padding: 30rpx;
        border-radius: 16rpx;

        .u-upload__button {
          background-color: #fff7f5;

          .u-icon__icon {
            color: $s-manager-color !important;
            font-size: 80rpx !important;
            line-height: 80rpx !important;
          }
        }
      }
    }

    .order-form-block {
      background-color: #fff;
      box-shadow: $s-bg-shadow;
      border-radius: $s-border-radius;
      margin-bottom: 30rpx;

      .service-staff {
        width: 108px;
        height: 28px;
        border-radius: 14px;
      }

      .justify-right {
        justify-content: right;
        width: 100%;
      }

      ::v-deep .uni-input-wrapper {
        .uni-input-input {
          text-align: right;
        }

        .input-placeholder {
          text-align: right;
          color: #808080;
        }
      }

      ::v-deep .u-form-item__body__left__content__label {
        color: #222;
        font-size: 30rpx;
      }
    }
  }

  .order-popup {
    width: 600rpx;
    padding: 25rpx 30rpx;

    .popup-title {
      color: #333;
      font-weight: bold;
      font-size: 28rpx;
      margin-bottom: 30rpx;
    }

    ::v-deep .uni-input-wrapper {
      .uni-input-input {
        text-align: left;
      }

      .input-placeholder {
        text-align: left;
        color: #808080;
      }
    }

    .popup-tip {
      margin-top: 20rpx;
      color: #555;
      font-size: 22rpx;
    }

    .btns {
      display: flex;
      justify-content: center;
      width: 100%;
      padding: 20rpx 0;
      margin-top: 30rpx;
      background-color: #fff;

      ::v-deep .u-button {
        margin: 0;
      }
    }

    .order-radio {
      padding: 20rpx;
      margin-top: 30rpx;
      // ::v-deep .uicon-checkbox-mark{
      // 	color:#F65D30 !important;
      // }
    }
  }
}
</style>
